<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{monitoring/layout}">

<head>
    <title th:text="#{cas.statistics.pagetitle}"></title>

    <script type="text/javascript" th:src="@{#{webjars.d3js.d3min.js}}"></script>

    <script type="text/javascript" th:inline="javascript">
        var messages = {
            memoryGaugeTitle: /*[[#{cas.statistics.section.serverstatistics.freememorygauge.label}]]*/
        };
        var urls = {
            availability: /*[[@{/status/stats/getAvailability}]]*/,
            memory: /*[[@{/status/stats/getMemStats}]]*/,
            tickets: /*[[@{/status/stats/getTicketStats}]]*/
        };

        function jqueryReady() {
            head.load(
                /*[[@{/js/statisticsview.js}]]*/
                ,
                function () {
                    var server_uptime = upTime([[${upTime}]], 'uptime');

                    casStatistics(urls, messages);
                }
            );
        };
    </script>

</head>

<body>
<div layout:fragment="content">

    <div id="loading" th:text="#{cas.statistics.loading}"></div>

    <div class="statisticsView">
        <h2 th:text="#{cas.statistics.pagetitle}">cas.statistics.pagetitle</h2>

        <div class="section adminPanels">
            <h3 th:text="#{cas.statistics.section.ticket.title}">cas.statistics.section.ticket.title</h3>
            <div class="card-deck">
                <div class="card" id="card-unexpired-tgts">
                    <div class="card-body">
                        <h4 class="card-title semi-huge"
                            th:text="#{cas.statistics.section.ticket.panel.unexpiredtgts.title}"></h4>
                        <p id="unexpiredTgts" class="card-text huge">--</p>
                    </div>
                </div>
                <div class="card" id="card-unexpired-sts">
                    <div class="card-body">
                        <h4 class="card-title semi-huge" th:text="#{cas.statistics.section.ticket.panel.unexpiredsts.title}"/>
                        <p id="unexpiredSts" class="card-text huge">--</p>
                    </div>
                </div>
                <div class="card" id="card-expired-tgts">
                    <div class="card-body">
                        <h4 class="card-title semi-huge" th:text="#{cas.statistics.section.ticket.panel.expiredtgts.title}"/>
                        <p id="expiredTgts" class="card-text huge">--</p>
                    </div>
                </div>

                <div class="card" id="card-expired-sts">
                    <div class="card-body">
                        <h4 class="card-title semi-huge" th:text="#{cas.statistics.section.ticket.panel.expiredsts.title}"/>
                        <p id="expiredSts" class="card-text huge">--</p>
                    </div>
                </div>
            </div>
        </div>

        <section class="runtimePanels">
            <h3 th:text="#{cas.statistics.section.serverstatistics.title}"></h3>
            <div class="row">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="section" id="memoryUsageWrapper">
                            <div id="memoryGauge"></div>
                        </div>
                        <div id="maxMemoryWrapper">
                            <div id="maxMemoryGauge"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div id="card-uptime" class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-auto mr-auto">
                                    <i class="far fa-clock fa-4x"></i>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="huge" th:text="#{cas.statistics.section.serverstatistics.panel.uptime.title}"></div>
                                    <div id="uptime"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="card-server-info" class="card">
                        <div class="card-header d-flex">
                            <div class="fas fa-server fa-4x"></div>
                            <div class="ml-auto huge" th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.title}"></div>
                        </div>
                        <div class="card-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th class="w-25"
                                        th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.label}"/>
                                    <th class="w-75"
                                        th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.value.label}"/>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.server.label}"/>
                                    <td th:text="${#httpServletRequest.getServerName() + '-' + #httpServletRequest.getLocalAddr()}"/>
                                </tr>
                                <tr th:if="${casTicketSuffix}">
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.casticketsuffix.label}"/>
                                    <td th:text="${casTicketSuffix}"/>
                                </tr>
                                <tr>
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.starttime.label}"/>
                                    <td th:text="${startTime}"/>
                                </tr>
                                <tr>
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.memory.label}"/>
                                    <td><span id="freeMemory" th:text="${freeMemory}"/> MB
                                        <span th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.free}"/>
                                        <br/>
                                        <span id="totalMemory" th:text="${totalMemory}"/> MB
                                        <span th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.total}"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.maxmemory.label}"/>
                                    <td>
                                        <span id="maxMemory" th:text="${maxMemory}"/> MB
                                    </td>
                                </tr>
                                <tr>
                                    <td th:text="#{cas.statistics.section.serverstatistics.panel.serverinfo.table.property.availprocessors.label}"/>
                                    <td id="availableProcessors" th:text="${availableProcessors}"/>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div th:replace="monitoring/fragments/footerButtons"/>
    </div>
</div>
</body>
</html>
